<template>
  <div class="searchContainer " @contextmenu.prevent="">
    <!-- 相对 -->
    <div id="searchBox" class="searchBox">
      <input v-focus @contextmenu.prevent="" :class="{ searchBoxHover: isFocus }" @input="debounce()"
        @blur="search = 'search'" @focus="focusSearch()" :placeholder="search" v-model.trim="keyword" autocomplete="off"
        type="text" @keyup="get($event)" @keydown.down.prevent="selectDown" @keydown.up.prevent="selectUp" />
      <div :class="['searchBtn', 'searchEngine', { showSearchBtn: isFocus }]" @click="switchEngine()">
        <img :src="enginBox[curEngin].cover" alt="" />
      </div>
      <div :class="['searchBtn', 'searchBarBtn', { showSearchBtn: isFocus }]" @click="startSearch()">
        <img src="../assets/dark/search.png" alt="" />
      </div>
    </div>
    <div class="searchOption" @contextmenu.prevent="">
      <Transition>
        <ul :class="['engine-list', 'menu', {}]" v-if="enginShow">
          <li v-for="(item, index) in enginBox" :key="index" :class="item.icon" @click="enginItem(index)">
            <img :src="item.cover" alt="" />
            {{ item.name }}
          </li>
        </ul>
      </Transition>
      <ul id="list-group" class="list-group" @contextmenu.prevent="">
        <li v-for="(item, index) in sug.s" @click="navigator(item)" :class="{ focus: index == now }">
          {{ item }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import api from "../api/baidu";
import { useStore } from "../store"; // 引入pinia
import { ref, reactive, computed, watch } from "vue";
const store = useStore();

const keyword = ref("");
const sug = reactive({
  s:[]
});
const now = ref(-1);
const timer = ref(null);
const search = ref("搜索网页");
const curEngin = ref(0);

watch(() => sug.s, (n) => {
  if (n == undefined) {
    sug.s = [];
  }
})
async function searchSug() {
  let res = await api.baidu(keyword.value);
  sug.s = res.s;
  return res;
}

// 跳转
const goToPage = (i, key) => {
  switch (i) {
    case 0:
      window.open(`https://www.baidu.com/s?tn=68018901_39_oem_dg&ie=utf-8&word=${key}`)
      // console.log("百度了", key);
      break;
    case 1:
      window.open(`https://cn.bing.com/search?q=${key}`)
      // console.log("Bing了", key);
      break;
    case 2:
      window.open(`https://www.so.com/s?q=${key}`)
      console.log("360了", key);
      break;
    case 3:
      window.open(`https://www.sogou.com/web?query=${key}`)
      console.log("sogou了", key);
      break;
    default:
      break;
  }
};
const debounce = () => {
  if (timer.value !== null) {
    clearTimeout(timer.value);
  }
  timer.value = setTimeout(() => {
    searchSug(curEngin.value);
  }, 300);
};

const isFocus = computed(() => {
  let flag = store.user.focus;
  if (!flag) {
    sug.s = [];
    keyword.value = "";
  }
  return store.user.focus;
});

const startSearch = async () => {
  goToPage(curEngin.value, keyword.value);
};
// 打开搜索
function navigator(keywordItem) {
  goToPage(curEngin.value, keywordItem);
  store.setdata("focus", false);
  keyword.value = "";
  sug.s = [];
}
function get(e) {
  if (e.keyCode == 38 || e.keyCode == 40) return;
  // 回车
  if (e.keyCode == 13) {
    // 打开搜索
    goToPage(curEngin.value, keyword.value);
    keyword.value = "";
    sug.s = [];
  }
}
function selectDown() {
  if (!keyword.value) {
    return
  }
  now.value++;
  // 从最后一个跳至第一个
  if (now.value == sug.s.length) {
    now.value = -1;
  }
  console.log(keyword.value);
  keyword.value = sug.s[now.value];
}
function selectUp() {
  if (!keyword.value) {
    return
  }
  now.value--;
  // 从第一个跳至最后一个
  if (now.value == -2) {
    now.value = sug.s.length - 1;
  }
  console.log(keyword.value);
  keyword.value = sug.s[now.value];
}

// 切换引擎
const enginShow = computed(() => {
  return store.enginCard;
});
const enginBox = reactive([
  {
    icon: "icon",
    cover: new URL(`../assets/icon/百度.svg`, import.meta.url).href,
    name: "百度",
  },
  {
    icon: "icon",
    cover: new URL(`../assets/icon/bing.svg`, import.meta.url).href,
    name: "Bing",
  },
  {
    icon: "icon",
    cover: new URL(`../assets/icon/360.svg`, import.meta.url).href,
    name: "360",
  },
  {
    icon: "icon",
    cover: new URL(`../assets/icon/sogou.svg`, import.meta.url).href,
    name: "sogou",
  },
]);

const switchEngine = () => {
  store.enginCard = !store.enginCard;
};
const enginItem = (i) => {
  curEngin.value = i;
  store.enginCard = false;
};

// 动画部分
function focusSearch() {
  search.value = "";
  store.setdata("focus", true);
}

// 自动聚焦
const vFocus = {
  mounted: (el) => {
    const flag = store.user.autoFocus;
    if (flag) {
      el.focus();
    } else {
      return;
    }
  },
};
</script>

<style scoped>
.searchContainer {
  /* width: 530px; */
  max-width: 70%;
  position: absolute;
  top: 250px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: column;
  /* transition: all .3s; */
  /* animation: fadeIn .3s; */
  animation-duration: 200ms;
}


#searchBox {
  width: 530px;
  max-width: 100%;
  height: 43px;
  margin-bottom: 12px;
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgb(0 0 0 / 20%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.25);
  overflow: hidden;
  transition: color 0.25s, background-color 0.25s, box-shadow 0.25s, left 0.25s,
    opacity 0.25s, top 0.25s, width 0.25s;
  position: relative;
}

.dark #searchBox {
  background-color: rgba(0, 0, 0, 0.35);
}

#searchBox input {
  outline: none;
  border: 0;
  text-align: left;
  width: var(--input-wid);
  height: 100%;
  color: inherit;
  background-color: transparent;
  font-size: 14px;
  font-family: var(--fonts-light);
  padding: 0 20px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

#searchBox input::-webkit-input-placeholder {
  color: inherit;
}

#searchBox input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: inherit;
}

#searchBox input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: inherit;
}

#searchBox:hover {
  color: var(--txt-b-pure);
  background-color: rgba(255, 255, 255, 0.6);
  box-shadow: rgb(0 0 0 / 30%) 0 0 10px;
}

.searchBoxHover {
  color: var(--txt-b-pure);
  background-color: rgba(255, 255, 255, 0.6);
  /* box-shadow: rgb(0 0 0 / 30%) 0 0 10px; */
}

.dark #searchBox:hover {
  color: var(--txt-b-pure);
  background-color: rgba(30, 30, 30, 0.9);
  box-shadow: rgb(0 0 0 / 30%) 0 0 10px;
}

.dark .searchBoxHover {
  color: var(--txt-b-pure);
  background-color: rgba(30, 30, 30, 0.9);
  /* box-shadow: rgb(0 0 0 / 30%) 0 0 10px; */
}

.searchBtn {
  opacity: 0;
  position: absolute;
  z-index: 1000;
  top: 5px;
  width: 33px;
  aspect-ratio: 1/1;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.25s;
  display: flex;
}

.searchBtn img {
  margin: auto;
  width: 60%;
}

.showSearchBtn {
  opacity: 1;
}

.searchEngine {
  left: 5px;
}

.searchEngine:hover {
  background-color: rgba(255, 255, 255, 0.6);
}

.searchBarBtn {
  right: 5px;
}



.searchBarBtn:hover {
  background-color: rgba(255, 255, 255, 0.6);
}

.searchOption {
  position: relative;
  width: 100%;
}

#list-group {
  position: absolute;
  z-index: 90;
  width: 530px;
  max-width: 100%;
  height: auto;
  font-size: small;
  overflow-y: hidden;
  border-radius: 10px;
  transition: 0.25s;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}

#list-group li {
  overflow: hidden;
  clear: both;
  height: 30px;
  line-height: 30px;
  padding: 0 10px 0 0;
  text-indent: 20px;
  text-align: left;
  cursor: pointer;
  background-color: var(--w-alpha-10);
  color: rgba(255, 255, 255, 0.8);
  transition: 0.25s var(--cubic-bezier);
}

#list-group li:hover,
#list-group li:focus {
  text-indent: 30px;
  background-color: var(--w-alpha-20);
}

#list-group .focus {
  text-indent: 30px;
  background-color: var(--w-alpha-20);
}

.engine-list {
  /* width: 100px; */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  max-width: 100%;
  height: auto;
  font-size: small;
  overflow-y: hidden;
  border-radius: 10px;
  transition: 0.25s cubic-bezier(0.65, 0.05, 0.1, 1);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}

.engine-list li {
  overflow: hidden;
  clear: both;
  height: 30px;
  line-height: 30px;
  padding: 0 10px 0 0;
  text-indent: 20px;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
  background-color: var(--w-alpha-80);
  color: var(--txt-b-pure);
  transition: 0.25s var(--cubic-bezier);
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
}

.engine-list .icon img {
  width: 18px;
  height: 13px;
  margin-left: 10px;
}

.engine-list li:hover,
.engine-list li:focus {
  text-indent: 30px;
  background-color: var(--w-alpha-20);
}

.engine-list .focus {
  text-indent: 30px;
  background-color: var(--w-alpha-20);
}

#poem {
  width: 530px;
  padding: 15px 50px;
  position: absolute;
  bottom: 125px;
  left: 50%;
  transform: translateX(-50%);
}

.v-enter-active,
.v-leave-active {
  transition: all 0.2s ease;
}

.v-enter-active {
  transform: scale(1.03);
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
  transform: scaleY(0.05);
}
</style>
